<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{$title ? $title : $sys.seo_title}</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="icon" href="__HOME__images/favicon.ico">

    <!-- CSS
    ============================================ -->
    <!-- Bootstrap CSS -->
    <link href="__HOME__css/bootstrap.min.css" rel="stylesheet">

    <!-- FontAwesome CSS -->
    <link href="__HOME__css/font-awesome.min.css" rel="stylesheet">

    <!-- Linear Icon CSS -->
    <link href="__HOME__css/linear-icon.css" rel="stylesheet">

    <!-- Plugins CSS -->
    <link href="__HOME__css/plugins.css" rel="stylesheet">

    <!-- Helper CSS -->
    <link href="__HOME__css/helper.css" rel="stylesheet">

    <!-- Main CSS -->
    <link href="__HOME__css/main.css" rel="stylesheet">
    <link href="__HOME__css/new.css" rel="stylesheet">

    <!-- Modernizer JS -->
    <script src="__HOME__js/vendor/modernizr-2.8.3.min.js"></script>
    <!-- jQuery JS -->
    <script src="__HOME__js/vendor/jquery.min.js"></script>
    <style>
        .ptk-product .image a:nth-child(2){display: none !important;}
        .ptk-product .image a:nth-child(3) {bottom: 15px;top: auto}
    </style>
</head>

<body>


<!--=============================================
=            Header One         =
=============================================-->

<div class="header-container header-sticky">

    <!--=======  header top  =======-->

    <div class="header-top pt-15 pb-15">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 text-center text-md-left mb-sm-15">
                    <span class="header-top-text">Welcome to Teaser Online Shopping Store !</span>
                </div>
                <div class="col-12 col-md-6">
                    <!--=======  header top dropdowns  =======-->
                    <div class="header-top-dropdown d-flex justify-content-center justify-content-md-end">
                        <!--=======  single dropdown  =======-->
                        <div class="single-dropdown">
                            <a href="#" id="changeAccount"><span id="accountMenuName">My Account <i
                                    class="fa fa-angle-down"></i></span></a>
                            <div class="language-currency-list hidden" id="accountList">
                                <ul>
                                    <li><a href="{:url('home/user/index')}">My Account</a></li>
                                    <li><a href="{:url('home/user/logout')}">Logout</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--=======  End of header top dropdowns  =======-->
                </div>
            </div>
        </div>
    </div>

    <!--=======  End of header top  =======-->

    <!--=======  Menu Top  =======-->
    <div class="menu-top pt-35 pb-35 pt-sm-20 pb-sm-20">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-lg-3 col-md-3 text-center text-md-left mb-sm-20">
                    <!--=======  logo  =======-->

                    <div class="logo">
                        <a href="/">
                            <img src="__HOME__images/logo.png" class="img-fluid" alt="">
                        </a>
                    </div>

                    <!--=======  End of logo  =======-->
                </div>
                <div class="col-12 col-lg-6 col-md-5 mb-sm-20">
                    <!--=======  Search bar  =======-->
                    <form action="{:url('home/product/index')}">
                        <div class="search-bar">
                            <input type="search" name="keywords" value="<?=$keywords?>" placeholder="Search here ...">
                            <button><i class="lnr lnr-magnifier"></i></button>
                        </div>
                    </form>
                    <!--=======  End of Search bar  =======-->
                </div>
                <div class="col-12 col-lg-3 col-md-4">
                    <div class="menu-top-icons d-flex justify-content-center align-items-center justify-content-md-end">
                        <div class="single-icon">
                            <a href="javascript:void(0)" id="cart-icon">
                                <i class="lnr lnr-cart"></i>
                                <span class="text">My Cart</span>
                                <span class="count" id="x_count">0</span>
                            </a>
                            <div class="cart-floating-box hidden" id="cart-floating-box">
                                <div class="cart-items"></div>
                                <div class="cart-calculation">
                                    <div class="calculation-details" style="display: none">
                                        <p class="total">Subtotal <span id="total"></span></p>
                                    </div>
                                    <div class="floating-cart-btn text-center">
                                        <a class="floating-cart-btn" href="{:url('home/order/checkout')}">Checkout</a>
                                        <a class="floating-cart-btn" href="{:url('home/cart/index')}">View Cart</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--=======  End of Menu Top  =======-->

    <!--=======  navigation menu  =======-->
    <div class="navigation-menu">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-3">
                    <!--=======  category menu  =======-->
                        <div class="hero-side-category">
                        <!-- Category Toggle Wrap -->
                        <div class="category-toggle-wrap">
                            <!-- Category Toggle -->
                            <button class="category-toggle"><span class="lnr lnr-text-align-left"></span> Browse
                                Categories <span class="lnr lnr-chevron-down"></span></button>
                        </div>
                        <!-- Category Menu -->
                        <nav class="category-menu">
                            <ul>
                                {volist name='gs_list' id='vo'}
                                <li  {if !empty($vo['child'])}class="menu-item-has-children"{/if}>
                                    <a href="{:url('home/product/index')}?cid={$vo.id}">{$vo.title}</a>
                                    {if !empty($vo['child'])}
                                    <ul class="category-mega-menu">
                                        <li class="menu-item-has-children">
                                            <ul>
                                                {volist name="$vo['child']" id='vv'}
                                                <li><a href="{:url('home/product/index')}?cid={$vv.id}">{$vv.title}</a></li>
                                                {/volist}
                                            </ul>
                                        </li>
                                    </ul>
                                    {/if}
                                </li>
                                {/volist}
                            </ul>
                        </nav>
                    </div>
                    <!--=======  End of category menu =======-->
                </div>
                <div class="col-12 col-lg-9">
                    <div class="main-menu">
                        <nav>
                            <ul>
                                <li class="active"><a href="/">HOME</a></li>
                                <li><a href="{:url('home/product/index')}">ALL PRODUCTS</a></li>
                                <li><a href="{:url('home/user/index')}">MY ACCOUNT</a></li>
<!--                                <li><a href="{:url('home/user/favorite')}">MY FAVORITE</a></li>-->
                                <li><a href="{:url('home/user/faq')}">HELP DESK</a></li>
                            </ul>
                        </nav>
                    </div>
                    <!-- end of navigation section -->
                </div>
                <div class="col-12 d-block d-lg-none">
                    <!-- Mobile Menu -->
                    <div class="mobile-menu"></div>
                </div>
            </div>
        </div>
    </div>
    <!--=======  End of navigation menu  =======-->
</div>